<template>
  <div class="box">
    <div class="box_one">
      <div class="box_list">1</div>
      <div class="box_content">
        <div class="early_title">监理单位选取方式</div>
        <div class="early_select">
          <span>选取方式</span>
          <el-select v-model="value" placeholder="--请选择--" @change="changeValue">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div class="early_select" v-show="flag1">
          <span>招标文件</span>
          <div class="upLoadImg">
            <upload ref="hetongBox1" @beforeUpload="beforeUpload" @res="getRes($event,1)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select" v-show="flag2">
          <span>采购文件</span>
          <div class="upLoadImg">
            <upload ref="hetongBox2" @beforeUpload="beforeUpload" @res="getRes($event,2)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select" v-show="flag3">
          <span>抽取报告</span>
          <div class="upLoadImg">
            <upload ref="hetongBox3" @beforeUpload="beforeUpload" @res="getRes($event,3)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">2</div>
      <div class="box_content">
        <div class="early_title">监理单位名称</div>
        <!-- <div class="early_select">
          <span>单位是否已在诚信管理系统注册</span>
          <el-radio-group v-model="radio" @change="changeRadio">
            <el-radio label="YES">是</el-radio>
            <el-radio label="NO">否</el-radio>
          </el-radio-group>
        </div> -->
        <div class="early_select early_selectTwo">
          <!-- <div v-if="isFlag1"> 
            <div >-->
            <span>机构名称：</span>
            <el-select v-model="companyValue" @change='changeCompany'  filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          <!--</div>
           <div v-if="isFlag2" class="lineBlo">
            <span>机构名称：</span>
            <el-input v-model="inputCompany" placeholder="请输入公司名称"></el-input>
          </div> -->
        </div>
        <div class="early_select early_selectTwo" v-show="flag1">
          <span>中标通知书</span>
          <div class="upLoadImg">
            <upload ref="hetongBox4" @beforeUpload="beforeUpload" @res="getRes($event,4)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag2">
          <span>中选/标通知书</span>
          <div class="upLoadImg">
            <upload ref="hetongBox5" @beforeUpload="beforeUpload" @res="getRes($event,5)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo" v-show="flag3">
          <span>抽取公告</span>
          <div class="upLoadImg">
            <upload ref="hetongBox6" @beforeUpload="beforeUpload" @res="getRes($event,6)" :accept="'.pdf'" />
          </div>
        </div>
        <div class="early_select early_selectTwo">
          <span>总监：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="chiefInspectorId"  filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!-- </div>
          <div v-else>
            <el-input v-model="chiefInspector" placeholder="请输入"></el-input>
          </div> -->

        </div>
        <div class="early_select early_selectTwo">
          <span>监理员：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="supervisorId"  filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!--</div>
           <div v-else>
            <el-input v-model="supervisor" placeholder="请输入"></el-input>
          </div> -->
        </div>
        <div class="early_select early_selectTwo">
          <span>乡镇监督代表：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="townSupervisoryRepresentativeId"  filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!-- </div>
          <div v-else>
            <el-input v-model="townSupervisory" placeholder="请输入"></el-input>
          </div> -->
        </div>
        <div class="early_select early_selectTwo">
          <span>农民监理代表：</span>
          <!-- <div v-if="radio=='YES'"> -->
            <el-select v-model="farmerSupervisoryRepresentativeId"  filterable placeholder="--请选择--">
              <el-option
                v-for="item in companyPeopleList"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              ></el-option>
            </el-select>
          <!-- </div>
          <div v-else>
            <el-input v-model="farmerSupervisor" placeholder="请输入"></el-input>
          </div> -->
        </div>
      </div>
    </div>
    <div class="box_one box_two">
      <div class="box_list">3</div>
      <div class="box_content">
        <div class="early_title">合同信息</div>

        <div class="early_select">
          <span>已签订的合同</span>
          <div class="upLoadImg">
            <upload ref="hetongBox7" @beforeUpload="beforeUpload" @res="getRes($event,7)" :accept="'.pdf'" />
          </div>
        </div>
      </div>
    </div>

    <div class="btn">
      <el-button size="medium" type="primary" :disabled="noUpload" @click="btn_submit" :loading='isLoading'>提交</el-button>
      <el-button size="medium" @click="getCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
import { constants } from "crypto";
import { upImg } from "@/api/upImg";
import {
  manageSelectionMode,
  manageCompanys,
  saveJIanli,
  queryEarlyMappingStaffs,
} from "@/api/implementationChoose";
import upload from "@/components/upload";
import { truncate } from "fs";
export default {
  components: {
    upload
  },
  data() {
    return {
      noUpload:false,
      input1: "",
      options: [],
      value: "G_K_Z_B",
      radio: "",
      flag1: true,
      flag2: true,
      flag3: true,
      isFlag1: false,
      isFlag2: false,
      
      companyPeopleList:[], //公司下人员列表
      companyList: [],
      companyValue: "", //诚信公司（是）
      companyName: "",
      inputCompany: "", //诚信公司（否）
      chiefInspectorId: "", //总监
      supervisorId: "", //监管员
      townSupervisoryRepresentativeId: "", //乡镇监督代表
      farmerSupervisoryRepresentativeId: "", //农村监督代表

      chiefInspector: "", //总监
      supervisor: "", //监管员
      townSupervisory: "", //乡镇监督代表
      farmerSupervisor: "", //农村监督代表

      isLoading:false,
      wenjianObj: {
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
    };
  },
  created() {
    this.getWay();
    this.getCompany();
    this.changeValue()
  },
  methods: {
    //上传前
    beforeUpload() {
      this.isLoading = true;
    },
    //上传后
    getRes(res, index) {
      this.wenjianObj["wenjian" + index].fileName = res.data.fileName;
      this.wenjianObj["wenjian" + index].fileUrl = res.data.filePath;
      this.wenjianObj["wenjian" + index].id = res.data.id;
      this.noUpload = false;
      this.isLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
    },
    // changeRadio() {
    //   //单选按钮
    //   if (this.radio == "YES") {
    //     this.isFlag1 = true;
    //     this.isFlag2 = false;
    //   } else if (this.radio == "NO") {
    //     this.isFlag2 = true;
    //     this.isFlag1 = false;
    //   }
    // },
    btn_submit() {
      //提交
      const that=this
      if(that.value==0){
        that.$message({
          message: '请选择选取方式',
          type: 'warning'
        });
        return
      }
      
     
      let obj={
        projectId:localStorage.getItem("projectId"),
        selectionMode:that.value,
        contractFileId:that.wenjianObj.wenjian7.id,
        appEnterpriseId:that.companyValue,
        chiefInspectorId:that.chiefInspectorId,
        supervisorId:that.supervisorId,
        townSupervisoryRepresentativeId:that.townSupervisoryRepresentativeId,
        farmerSupervisoryRepresentativeId:that.farmerSupervisoryRepresentativeId
      }
      //if(that.radio=='YES'){
        // if(that.companyValue==''){
        //   that.$message({
        //     message: '请选择规划设计与实施方案编制单位名称',
        //     type: 'warning'
        //   });
        //   return
        // }
      //   obj['appEnterpriseId']=that.companyValue
      //  // obj['appEnterpriseName']=that.companyName
      //  obj['chiefInspectorId']=that.chiefInspectorId
      //  obj['supervisorId']=that.supervisorId
      //  obj['townSupervisoryRepresentativeId']=that.townSupervisoryRepresentativeId
      //  obj['farmerSupervisoryRepresentativeId']=that.farmerSupervisoryRepresentativeId
     // }
      // else if(that.radio=='NO'){
      //   if(that.inputCompany==''){
      //     that.$message({
      //       message: '请输入规划设计与实施方案编制单位名称',
      //       type: 'warning'
      //     });
      //     return
      //   }
      //   obj['enterpriseName']=that.inputCompany
      //   let chiefInspector={
      //     name:that.chiefInspector,
      //     num:'',
      //     enterpriseId:''
      //   }
      //   let supervisor={
      //     name:that.supervisor,
      //     num:'',
      //     enterpriseId:''
      //   }
      //   let townSupervisory={
      //     name:that.townSupervisory,
      //     num:'',
      //     enterpriseId:''
      //   }
      //   let farmerSupervisor={
      //     name:that.farmerSupervisor,
      //     num:'',
      //     enterpriseId:''
      //   }
      //   obj['chiefInspectorVo']=chiefInspector
      //   obj['supervisorVo']=supervisor
      //   obj['townSupervisoryRepresentativeVo']=townSupervisory
      //   obj['farmerSupervisoryRepresentativeVo']=farmerSupervisor
      // }
      if(that.value=='G_K_Z_B'){
       
        obj['tenderingFileId']=that.wenjianObj.wenjian1.id
        obj['winBidFileId']=that.wenjianObj.wenjian4.id
      }else if(that.value=='Z_F_C_G'){
        
        obj['purchaseFileId']=that.wenjianObj.wenjian2.id
        obj['winElectionFileId']=that.wenjianObj.wenjian5.id
      }else if(that.value=='J_K_S_J_C_Q'){
        
        obj['extractNoticeFileId']=that.wenjianObj.wenjian3.id
        obj['extractResultNoticeFileId']=that.wenjianObj.wenjian6.id
      }
      console.log(obj, "obj");
      that.isLoading=true
      saveJIanli(obj).then(res=>{
        console.log(res,'re')
        if(res.code==1000){
          that.isLoading=false
          that.$message({
            message:'提交成功',
            type:'success'
          })
          that.getCancel()
        }
      }).catch(error=>{
        that.isLoading=false
      })
    },
    //查询公司下面的人员
    getCompanyPeople(companyId){
      var data={
        organizationId:companyId
      }
      queryEarlyMappingStaffs(data).then(res=>{
        this.companyPeopleList=res.data
      })
    },
    changeCompany(v){
      console.log(v,'v')
      this.getCompanyPeople(v)
    },
    
    getCompany() {
      manageCompanys().then(res => {
        console.log(res, "res");
        this.companyList = res.data;
      });
    },
    getWay() {
      //选取方式
      manageSelectionMode().then(res => {
        console.log(res, "res");
        this.options = res.data;
        this.options.unshift({
          value: "0",
          code: "0",
          name: "--请选择--"
        });
      });
    },
    changeValue() {
      //下拉框值
      this.$nextTick(()=>{
        this.$refs.hetongBox7.setValue(1)
      })
      console.log(this.value);
      if (this.value == 0) {
        this.flag1 = false;
        this.flag2 = false;
        this.flag3 = false;
        this.getClear();
      } else if (this.value == "G_K_Z_B") {
        this.flag1 = true;
        this.flag2 = false;
        this.flag3 = false;
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.radio = "";
        this.companyValue = "";
        this.inputCompany = "";
        this.chiefInspector = "";
        this.supervisor = "";
        this.townSupervisor = "";
        this.farmerSupervisor = "";
        this.$nextTick(()=>{
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox5.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "Z_F_C_G") {
        this.flag2 = true;
        this.flag1 = false;
        this.flag3 = false;
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.radio = "";
        this.companyValue = "";
        this.inputCompany = "";
        this.chiefInspector = "";
        this.supervisor = "";
        this.townSupervisor = "";
        this.farmerSupervisor = "";
        this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox3.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox6.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian3 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian6 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      } else if (this.value == "J_K_S_J_C_Q") {
        this.flag3 = true;
        this.flag1 = false;
        this.flag2 = false;
        this.radio = "";
        this.companyValue = "";
        this.inputCompany = "";
        this.chiefInspector = "";
        this.supervisor = "";
        this.townSupervisor = "";
        this.farmerSupervisor = "";
        this.isFlag1 = false;
        this.isFlag2 = false;
        this.$nextTick(()=>{
          this.$refs.hetongBox1.setValue(1)
          this.$refs.hetongBox2.setValue(1)
          this.$refs.hetongBox4.setValue(1)
          this.$refs.hetongBox5.setValue(1)
        })
        this.wenjianObj.wenjian1 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian2 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian4 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian5 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
        this.wenjianObj.wenjian7 = {
          fileName: "",
          fileUrl: "",
          id: ""
        };
      }
    },
    getCancel() {
      //取消
      // this.get_early_select_way()
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
      this.getClear();
    },
    getClear() {
      this.chiefInspectorId=''
      this.supervisorId=''
      this.townSupervisoryRepresentativeId=''
      this.farmerSupervisoryRepresentativeId=''
      //清空值
      this.$nextTick(()=>{
        this.$refs.hetongBox1.setValue(1)
        this.$refs.hetongBox2.setValue(1)
        this.$refs.hetongBox3.setValue(1)
        this.$refs.hetongBox4.setValue(1)
        this.$refs.hetongBox5.setValue(1)
        this.$refs.hetongBox6.setValue(1)
        this.$refs.hetongBox7.setValue(1)
      })
      this.value = "G_K_Z_B";
      this.changeValue()
      this.companyValue = "";
      this.inputCompany = "";
      this.chiefInspector = "";
      this.supervisor = "";
      this.townSupervisor = "";
      this.farmerSupervisor = "";
      this.wenjianObj={
        wenjian1: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian2: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian3: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian4: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian5: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian6: {
          fileName: "",
          fileUrl: "",
          id: ""
        },
        wenjian7: {
          fileName: "",
          fileUrl: "",
          id: ""
        }
      }
      this.isLoading=false
      this.radio = "";
      this.isFlag1 = false;
      this.isFlag2 = false;
    }
  }
};
</script>

<style lang="scss" >
.form .el-input__inner {
  width: 200px;
}
</style>

<style lang="scss" scoped>
.box {
  padding: 60px;
  .box_one {
    display: flex;
    .box_list {
      background: #2e8ae6;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      font-size: 20px;
      color: white;
      margin-top: 8px;
    }

    .box_content {
      margin-left: 20px;

      .early_title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        line-height: 50px;
        margin-bottom: 20px;
      }
      .early_select {
        display: flex;
        align-items: center;
        font-size: 13px;
        color: #444;
        font-weight: bold;
        margin-bottom: 25px;
        span {
          margin-right: 20px;
        }
        .upLoadImg {
          display: flex;
          align-items: center;

          .btnUpload {
            width: 90px;
            margin-right: 20px;
          }
        }
      }
    }
  }
  .box_two {
    .box_list {
      opacity: 0.5;
    }
    .box_content {
      .early_selectTwo {
        span {
          width: 100px;
          margin-right: 10px;
        }
      }
    }
  }
  .btn {
    margin-top: 20px;
    margin-left: 80px;
  }
  .lineBlo{
    display: flex;
    align-items: center;
  }
}
</style>
